<template>
  <div class="detail">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center>
        {{ detail.name }}
      </template>
    </my-header>
    <div class="content">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <ul class="right">
        <li v-for="(item, index) in menuList[active]?.foods" :key="index">
          <img :src="'https://elm.cangdu.org/img/' + item.image_path" alt="" />
          <section>
            {{ item.name }}
          </section>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import myHeader from "../components/myHeader.vue";
import api from "../api/index";
export default {
  components: { myHeader },
  setup() {
    const { params } = useRoute();
    // console.log(params.id);
    const data = reactive({
      detail: {},
      menuList: [], // 菜单
      active: 0,
    });
    api.get(`/shopping/restaurant/${params.id}`).then((res) => {
      data.detail = res;
    });

    api.get(`/shopping/v2/menu?restaurant_id=${params.id}`).then((res) => {
      data.menuList = res;
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
}
.content {
  height: calc(100% - 50px);
  overflow: hidden;
  display: flex;
  .right {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    li {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #e9e9e9;
      align-items: center;
      img {
        width: 80px;
      }
      section {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
}
</style>